<script setup>
import { ref } from "vue";
import {
  articleGetChannelService,
  artDelChannelService,
} from "@/api/other/article";
import { Edit, Delete } from "@element-plus/icons-vue";
import ChannelEdit from "@/views/article/components/ChannelEdit.vue";
//数据加载动画
const loading = ref(false);

// 获取dialog
const dialog = ref();

// 获取文章频道数据
const channelList = ref([]);
const getChannelList = async () => {
  loading.value = true;
  const res = await articleGetChannelService();
  channelList.value = res.data.data;
  loading.value = false;
};
// 调用函数
getChannelList();

// 编辑
const onEditChannel = (row) => {
  dialog.value.open(row);
};
// 添加
const onAddChannel = (row) => {
  dialog.value.open({});
};

// 删除
const onDelChannel = async (row) => {
  console.log(row);
  ElMessageBox.confirm(`你确认删除“${row.cate_name}”分类信息吗？`, "温馨提示", {
    type: "warning",
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  })
    .then(async () => {
      await artDelChannelService(row.id);
      getChannelList();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除取消",
      });
    });
  // ElMessage({ type: "success", message: "删除成功" });
};

// 回显数据
const onSuccess = () => {
  getChannelList();
};
</script>
<template>
  <pageContainer title="文章分类">
    <template #extra>
      <el-button type="primary" @click="onAddChannel()">添加分类</el-button>
    </template>
    <el-table
      :data="channelList"
      stripe
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="分类名称" prop="cate_name" />
      <el-table-column label="分类别名" prop="cate_alias" />
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditChannel(row)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDelChannel(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty> <el-empty description="没有数据" /></template>
    </el-table>
    <!-- 弹窗 -->
    <ChannelEdit ref="dialog" @success="onSuccess"></ChannelEdit>
  </pageContainer>
</template>
<style lang="scss" scoped></style>
